<template>
  <div class="flex h-screen overflow-hidden">
    <!-- 左侧边栏 -->
    <aside class="w-64 bg-white border-r border-gray-200 flex-shrink-0 overflow-y-auto">
      <div class="h-full flex flex-col">
        <!-- 聊天列表 -->
        <div class="flex-1">
          <div class="px-3 py-4">
            <div class="text-gray-500 uppercase tracking-wider">消息</div>
          </div>

          <div v-for="it in chatStore.getChatList"
               class="flex items-center p-3 hover:bg-gray-50 cursor-pointer transition-colors"
               :class="{ 'bg-gray-100': activeChat === it }"
               @click="clickInto(it)">
            <div class="relative">
              <img :src="it.avatarUrl" alt="联系人头像" class="w-10 h-10 rounded-full object-cover">
              <!-- 在线状态指示器 -->
              <span v-if="it.online"
                    class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
              <!-- 未读消息徽章 - 移至头像右上角 -->
              <span v-if="it.unreadCount > 0"
                    class="absolute top-0 right-0 -mt-1 -mr-1 bg-red-500 text-white text-[10px] font-bold w-5 h-5 flex items-center justify-center rounded-full border-2 border-white">
                {{ it.unreadCount }}
              </span>
            </div>
            <div class="ml-3 flex-1 min-w-0">
              <div class="flex items-center justify-between">
                <h3 class="text-sm font-medium text-gray-900 truncate">{{ it.showName }}</h3>
              </div>
              <p class="mt-1 text-xs text-gray-500 truncate">
                {{ it.lastTip }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </aside>

    <!-- 右侧内容区 -->
    <div class="flex-1 overflow-y-auto bg-gray-50">
      <template v-if="activeChat">
        <ChattingPanel :chatting="activeChat"></ChattingPanel>
      </template>
    </div>

  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import type {Chatting} from "@/models/chat_model.js";
import {useChatStore} from "@/stores/chating_store.js";
import ChattingPanel from "@/views/chatting_components/ChattingPane.vue";

const chatStore = useChatStore();

//点中的chat
const activeChat = ref(null);

const clickInto = (it: Chatting) => {
  console.log(`click chatting: showName=${it.showName}`);
  it.unreadCount = 0;
  activeChat.value = it;
}
</script>

<style scoped>
/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.5);
  border-radius: 20px;
}
</style>